<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 技能中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
            <div class="handle-box">
             <el-button type="success" icon="plus" class="handle-del mr10" @click="addBanner()">添加新技能</el-button>
        </div>

        <el-table :data="bannerCenter" border style="width: 100%" ref="multipleTable"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column  label="封面图" width="120">
             <template scope="scope">
              <img :src="scope.row.owe_skill_show_gif" width="100%"/>
            </template>
            </el-table-column>
            <el-table-column prop="owe_skill_name" label="技能名称">
   
            </el-table-column>
       

             <el-table-column  prop="owe_skill_order"   label="排序(大->小)" width="150"> 
           
            </el-table-column>
            

             <el-table-column  prop="owe_skill_content"   label="简介"> 
           
            </el-table-column>
         
            <el-table-column label="操作" width="250" >
                <template scope="scope">
        
                    <el-button size="small"     @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"   @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
  


<el-dialog title="编辑技能信息" :visible.sync="setBannerInfo">
  <el-form label-width="100px">
    <el-form-item label="技能名称">
      <el-input type="input" placeholder="技能名称" v-model="bannerInfo.owe_skill_name" auto-complete="off"></el-input>
    </el-form-item>

    <el-form-item label="技能动态图:">
   <el-upload class="avatar-uploader" name='image' :action="uploadURI"  :show-file-list="false" :on-success="handleCoverSuccess">
   <img v-if="bannerInfo.owe_skill_show_gif" :src="bannerInfo.owe_skill_show_gif" class="avatar" style='width:100%'>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </el-form-item>


    <el-form-item label="技能简介">
     <el-input type="textarea" placeholder="技能简介" v-model="bannerInfo.owe_skill_content" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="排序">
      <el-input type="input" placeholder="从大到小" v-model="bannerInfo.owe_skill_order" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">关闭</el-button>
    <el-button type="danger" @click="saveBannerInfo">保存</el-button>
  </div>
</el-dialog>
 </div>
</template>

<script>
import * as rpConfig from '../../../rpConfig/constant'
import { HttpReq } from '../../service/server'
var Server = new HttpReq()
export default {
    data() {
        return {
            uploadURI: rpConfig.API_URI + '/Helpapi/uploadImg',
            bannerInfo:{
                owe_skill_id:0,
                owe_skill_name:'',
                owe_skill_gif:'',
                owe_skill_content:'',
                owe_skill_show_gif:'',
                owe_skill_order:0
            },
            bannerCenter: [],
            setBannerInfo:false,
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    created() {
        this.getData()
       
    },
    computed: {},
    methods: {
        handleCurrentChange(val) {
            this.cur_page = val
            this.getData()
        },
        handleCoverSuccess(res) {
    
            if (res.code != 200) {
                this.$message.error(res.msg)
            } else {
                this.bannerInfo.owe_skill_show_gif = res.data.url
                this.bannerInfo.owe_skill_gif = res.data.saveUrl
            }
        },
        getData() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/oweset.Skill/getSkill',
                {
                 
                },
                function(res) {
                    self.bannerCenter = res.data
                }
            )
        },
    

        closeEdit() {
            this.setBannerInfo = false
        },

        saveBannerInfo() {  
            let self = this
            Server._POST(rpConfig.API_URI + '/oweset.Skill/saveSkillInfo',self.bannerInfo,
                function(response) {
                    self.$message.success(response.msg)
                    self.closeEdit()
                    setTimeout(()=>{
                        self.getData()
                    },2000)
        
                })
        },

        handleEdit(row) {
            this.bannerInfo.owe_skill_id = row.owe_skill_id
            this.bannerInfo.owe_skill_name = row.owe_skill_name
            this.bannerInfo.owe_skill_gif =row.owe_skill_gif
            this.bannerInfo.owe_skill_content =row.owe_skill_content
            this.bannerInfo.owe_skill_show_gif =row.owe_skill_show_gif
            this.bannerInfo.owe_skill_order = row.owe_skill_order
            this.setBannerInfo=true
        },
        addBanner(){

            this.bannerInfo.owe_banner_id =0
            this.bannerInfo.owe_skill_name ='' 
            this.bannerInfo.owe_skill_gif =''
            this.bannerInfo.owe_skill_show_gif =''
            this.bannerInfo.owe_banner_img =''
            this.bannerInfo.owe_skill_order = 0
            this.bannerInfo.owe_skill_content = ''
            this.setBannerInfo=true 
        },
        handleDelete(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/oweset.Banner/deleteBannerItem',
                { item_id: [row.owe_skill_id] },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        }
    }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
  .item {
    margin-bottom: 18px;
    cursor: pointer;
  }
  .item:hover{
      color:#44b549
  }
  .curgroup{
      color:#44b549 
  }

</style>